<script setup lang="ts">
import { computed } from 'vue';
import type { TuiHeaderProps } from './types';

// 设置默认值
const props = withDefaults(defineProps<TuiHeaderProps>(), {
  height: '60px'
});

// 计算样式
const headerStyle = computed(() => {
  return {
    height: props.height
  };
});
</script>

<template>
  <header :style="headerStyle" class="tui-header">
    <slot></slot>
  </header>
</template>

<style lang="scss" scoped>
.tui-header {
  display: flex;
  padding: 0 20px;
  box-sizing: border-box;
  border-bottom: var(--tui-border-width) solid var(--tui-color-border);
  box-shadow: var(--tui-box-shadow);
}
</style>